<!-- 播放器窗口 -->
<template>
  <div class="player-container-main" :style = "style1"
       @click="click()" @mouseover="mouseOver()" @mouseleave="mouseLeave()">
    <div style="height: 18px;display: flex;flex-direction: row-reverse;background-color: RGB(0,21,41)" v-show="1==0">
      <Poptip word-wrap trigger="click" placement="bottom-end" width="280px">
        <Tooltip  content="设置">
          <Icon type="md-settings" size="16"/>
        </Tooltip>
        <div class="api" slot="content" style="margin-left: 10px">
          <CheckboxGroup v-model="deCoded">
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="mseH264" :disabled="deCodeDisable.mseH264"><span>使用MSE解码H264</span> </Checkbox> </Col>
            </row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="mseH265" :disabled="deCodeDisable.mseH265"><span>使用MSE解码H265</span> </Checkbox> </Col>
            </Row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="wcsH264" :disabled="deCodeDisable.wcsH264"><span>使用WCS解码H264</span> </Checkbox> </Col>
            </Row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="wcsH265" :disabled="deCodeDisable.wcsH265"><span>使用WCS解码H265</span> </Checkbox> </Col>
            </Row>

            <Row :gutter="4">
              <Col span="24"> <Checkbox label="wasm" :disabled="deCodeDisable.wasm"><span>使用WASM解码</span> </Checkbox> </Col>
            </Row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="simd" :disabled="deCodeDisable.simd"><span>使用SIMD解码</span> </Checkbox> </Col>
            </Row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="mtsimd" :disabled="deCodeDisable.mutisimd"><span>使用WASM WASM(SIMD)多线程解码</span> </Checkbox> </Col>
            </Row>
            <Row :gutter="4">
              <Col span="24"> <Checkbox label="demuxUseWorker"><span>使用硬解码</span> </Checkbox> </Col>
            </Row>
          </CheckboxGroup>
        </div>
      </Poptip>
    </div>
    <CommPlayer  v-if="livePlayer=='jessibucaPro'"
                 :ref="playerRef"
                 :deviceCode="deviceCode"
                 scale="scale"
                 :id="id"
                 :playParam="playParam"
    ></CommPlayer>
<!--    <rtc-player v-if="livePlayer=='ZlmRtcClient'"
                ref="playerRef"
                :visible.sync="true"
                :videoUrl="videoUrl"
                :error="videoError"
                :message="videoError"
                :playParam="playParam"
                height="100px"
                :hasAudio="hasAudio" fluent autoplay live >
    </rtc-player>-->
    <rtc-player v-if="livePlayer=='ZlmRtcClient'"
                :ref="playerRef"
                :elementId="playerRef"
                fluent autoplay live >
    </rtc-player>
  </div>
</template>
<script>

//import CommPlayer from "@/view/Home/component/CommPlayer";
import CommPlayer from "@/view/Home/component/CommProPlayer";
import rtcPlayer from '@/view/Home/component/ZlmRtcPlayer.vue'
import config from '@/config'
export default {
  components:{CommPlayer,rtcPlayer},
  name:"PlayerContainer",
  props:{
    playerRef:{
      type:String,
      default: "player1"
    },
    active:{
      type:Boolean,
      default: false
    },
    id:{
      type:Number,
      default:-1
    },
    deviceCode:{
      type: String,
      default: ()=>{return "未设置设备号"}
    },
    playParam:{
      type: Object,
      default: ()=>{
        return {
          protocol: "flv",
          pringLog:false,
          isDebug:true,
          isFlv:true,
          videoBuffer:0.2, //缓存时长
          videoBufferDelay:1,
          useMSE:true,//MediaSource
          useSIMD:false, //WASM(SIMD)
          useWCS:false, //Webcodec
          useSIMDMThreading:true,//启动多线程（WASM,WASM(SIMD)解码支持）
          showOperateBtns: true, // 显示网速
          forceNoOffscreen: true, //显示性能
          renderDom:"video",
          isUseWebGPU:'webgpu',//webgl
          demuxUseWorker:true,//硬解码(MediaSource，Webcodec)worker解封装
        }
      }
    }
  },
  watch:{
    active(){
      this.activeState=this.active;
      this.mouseMove=0;
      this.hoverClass();
    },
    playParam:{
      handler(o,n) {
        console.log("PlayerContainer.playParam:   o=%o; n=%o",o,n)
      },
      deep: true
    }
  },
  computed:{
  },
  data(){
    return{
      scale:false,
      activeState:false,
      style1:"border:1px solid #14edc5",
      activeStyle: 'border:1px solid #FF0000', //选中时的边框
      unActiveStyle: 'border:1px solid #032a52', //没选中时的边框
      moveInStyle: 'border:1px solid #063ffc',//移入时边框

      mouseMove: 0, //1 移入，2移出

      deCoded:[],
      deCodeDisable: {
        mseH264: !this.$supportMseH264,
        mseH265: !this.$supportMseHevc,
        wcsH264: !this.$supportWcs,
        wcsH265: !this.$supportMseHevc,
        wasm: !this.$supportWasm,
        simd: !this.$supportSimd,
        mutisimd: !this.$supportMtSimd
      },

      livePlayer: config.livePlayer(),//jessibuca  jessibucaPro ZlmRtcClient
      /*hoverClass: {
        'active-style': this.active,
        'un-active-style': this.unActive,
        'move-in-style': this.moveIn
        //playerRef: "player01"
      }*/

    }
  },
  methods:{
    getRef(){
      return this.playerRef;
    },
    play(videoUrl,deviceId,channelId){
      this.$refs[this.playerRef].play(videoUrl,deviceId,channelId);
    },

    isPlaying(){
      console.log(">>>>> PlayerContainer playerRef=%o",this.playerRef)
      console.log(">>>>> PlayerContainer player=%o",this.$refs[this.playerRef])
      return this.$refs[this.playerRef].isPlaying();
    },
/*    hoverClass1:function (){

      console.log(">>>>> mouseMove=%o;active=%o",this.mouseMove,this.active);
      if (this.mouseMove == 1){
        return this.getStyle(false,false,true);
      } else if (this.mouseMove == 2 && this.active) {
        return this.getStyle(true, false, false);
      } else {
        return this.getStyle(false, true, false);
      }
      this.mouseMove=0;
    },

    getStyle(active,unActive,moveIn){
      return{
        'active-style':active,
        'un-active-style':unActive,
        'move-in-style': moveIn
      }
    },*/
    hoverClass(){
      //console.log(">>>>> PlayerContainer.hoverClass: mouseMove=%o;activeState=%o;active=%o",this.mouseMove,this.activeState,this.active);
      if (this.activeState){
        this.style1 = this.activeStyle;
      }else{
        if (this.mouseMove==1){
          this.style1 = this.moveInStyle;
        }else{
          this.style1 = this.unActiveStyle;
        }
      }
    },

    click(){
      //console.log(">>>>>>>>PlayerContainer.click: id=%o,playerRef=%o,active=%o",this.id,this.playerRef,this.active)

      this.mouseMove=0;
      this.$emit('on-select-active', !this.activeState,this.id)
    },
    mouseOver(){
      this.mouseMove=1;
      this.hoverClass();
    },
    mouseLeave(){
      this.mouseMove=2;
      this.hoverClass();
    }
  },
  mounted() {
    this.activeState=this.active;
    this.hoverClass();
    this.deCodeDisable.mseH264=!this.$supportMseH264;
    this.deCodeDisable.mseH265=!this.$supportMseHevc;
    this.deCodeDisable.wcsH264=!this.$supportWcs;
    this.deCodeDisable.wcsH265=!this.$supportMseHevc;
    this.deCodeDisable.wasm=!this.$supportWasm;
    this.deCodeDisable.simd=!this.$supportSimd;
    this.deCodeDisable.mutisimd=!this.$supportMtSimd;

  }

}

</script>
<style lang="less">
.player-container-main{
  width: 100%;
  height: 100%;
  //选中时的边框
  .active-style{
    width: 100%;
    height: 100%;
    border:1px solid #FF0000;
    border-radius: 2px;
  }
  //没选中时的边框
  .un-active-style{
    width: 100%;
    height: 100%;
    border:1px solid #032a52;
    border-radius: 2px;
  }
  //移入时边框
  .move-in-style{
    width: 100%;
    height: 100%;
    border:1px solid #063ffc;
    border-radius: 2px;
  }
}
</style>
